<script setup lang="ts">
import { desensitize } from '@peng_kai/kit/utils/string';

const listQry = useQuery({
  queryKey: [apis.apiWithdrawLive.id],
  queryFn: () => apis.apiWithdrawLive(undefined),
});
</script>

<template>
  <div v-if="listQry.data.value" class="bg-black py-3">
    <div class="page-content-w flex items-center">
      <i class="i-local:trumpet-s1 mr-2 flex-none" />
      <div class="list-wrap flex flex-1 overflow-hidden">
        <div v-for="i of 2" :key="i" class="list">
          <div
            v-for="item of listQry.data.value" :key="i + item.order_no"
            class="item whitespace-nowrap text-nowrap text-3 text-sys-text-head"
          >
            <span>{{ desensitize(item.nickname, 3) }}</span>&nbsp;
            <span class="text-sys-text-body font-medium">{{ $t('w_7esadfBsRcVsUGuks9q') }}</span>&nbsp;
            <span>{{ item.amount }}</span>&nbsp;
            <span class="text-sys-text-body font-medium">{{ item.currency.currency }}.</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.list-wrap:hover .list {
  animation-play-state: paused;
}

.list {
  display: flex;
  animation: move 50s linear infinite both;
  will-change: transform, opacity;

  & + & {
    margin-left: 16px;
  }

  .item + .item {
    margin-left: 16px;
  }
}

@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
</style>
